<template>
  <div class="types">
    <div class="top_search">
      <my-input v-model="content" placeholder="回车搜索商品" />
    </div>
    <div class="shopList">
      <div class="left_nav">
        <ul>
          <li
            v-for="(item, i) in arr"
            :key="i"
            :class="current === i ? 'active' : ''"
            @click="tabClick(i,item.type)"
          >{{item.name}}</li>
        </ul>
      </div> 
      <div class="rightList">
        <div class="swiper">
          <my-swiper :banners="banners" autoplay></my-swiper>
        </div>
        <div class="shList">
          <ul>
            <li v-for="(item,i) in list " :key="i">
              <img :src="item.icon" alt />
              <p>{{item.name}}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import myInput from "@/components/myInput/myInput";
import mySwiper from "@/components/mySwiper/mySwiper";
import { getList, getBanners } from "../../utils/api/home";

export default {
  name: "",
  data() {
    return {
      content: "",
      originList: [],
      arr: [
        {
          name: "所有分类",
        },
        {
          name: "居家",
          type: "jujia2",
        },
        {
          name: "配件装饰",
          type: "peishi2",
        },
        {
          name: "服装",
          type: "fuzhuang",
        },
        {
          name: "家装",
          type: "fuzhuang2",
        },
        {
          name: "电器",
          type: "dianqi",
        }
      ],
      current: 0,
      banners: [],
      list: [],
    };
  },
  components: { myInput, mySwiper },
  created() {
    getList().then((res) => {
      this.list = res;
      this.originList = JSON.stringify(res);
    });
    getBanners().then((res) => {
      this.banners = res;
    });
  },
  mounted() {},
  methods: {
    tabClick(i, item1) {
      this.current = i;
      var array = JSON.parse(this.originList);
      if (i === 0) {
        this.list = JSON.parse(this.originList);
      } else {
        this.list = array.filter((item) => {
          return item.type.includes(item1);
        });
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.active {
  border-left: 2px solid red;
}
.types {
  height: 100%;
}
.top_search {
  font-size: 0.3rem;
  width: 100%;
  height: 1rem;

  /deep/input[type="text" i] {
    width: 5rem;
    height: 0.6rem;
    border-radius: 0.6rem;
    outline: none;
    border: 0;
    background-color: #cccc;
    margin: 0.2rem 0 0 0.2rem;
    padding-left: 0.2rem;
  }
}
.shopList {
  width: 100%;
  display: flex;
  height: calc(100vh - 2rem);

  .left_nav {
    height: 100%;
    font-size: 0.3rem;
    ul {
      width: 100%;
      li {
        text-align: center;
        width: 100%;
        height: 0.8rem;
        line-height: 0.8rem;
        padding-left: 0.4rem;
        
      }
    }
  }
  .rightList { 
    width: 78%;
    font-size: 0.3rem;
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    .shList {
      width: 100%;
      height: 100%;
      ul {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        li {
          width: 32%;
          text-align: center;
          height: 2.6rem;
          img {
            width: 80%;
            height: 60%;
          }
          p {
            margin-top: 0.2rem;
          }
        }
      }
    }
  }
  /deep/ #mySwiper {
    background-color: #ffffff;
    width: 100%;
    ul {
      position: relative;
      height: 3.75rem;
      li {
        overflow: hidden;
        float: left;
        height: 3.3rem;

        img {
          display: block;
          width: 80%;
          height: 100%;
          margin: 0 auto;
          //  border: 1px solid ;
          border-radius: 0.5rem;
        }
      }
    }
  }
}
</style>